/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */

// 每次请求需要携带creator
const creator = '柠澈'

// 封装-获取数据并渲染数据
function render() {
    // 获取数据
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        params: {
            creator
        }
    }).then((result) => {
        document.querySelector('.list').innerHTML = result.data.data.map((item,index) => {
            return `
            <tr>
                <td>${index + 1}</td>
                <td>${item.bookname}</td>
                <td>${item.author}</td>
                <td>${item.publisher}</td>
                <td data-id=${item.id}>
                    <span class="del">删除</span>
                    <span class="edit">编辑</span>
                </td>
            </tr>
            `
        }).join('')
    })
}

// 页面加载运行
render()

// 新增图书
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)

document.querySelector('.add-btn').addEventListener('click', () => {
    // 收集表单数据
    const addForm = document.querySelector('.add-form')
    const addFormData = serialize(addForm, { hash: true, empty: true })
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        method: 'POST',
        data: {
            ...addFormData,
            creator
        }
    }).then(() => {
        // 重新渲染数据
        render()
        // 清空表单
        addForm.reset()
    })
    // 隐藏弹框
    addModal.hide()
})


// 删除图书
document.querySelector('tbody').addEventListener('click', (e) => {
    if (e.target.classList.contains('del')) {
        // 获取图书id
        const bookId = e.target.parentNode.dataset.id
        axios({
            url: `http://hmajax.itheima.net/api/books/${bookId}`,
            method: 'DELETE'
        }).then(() => {
            // 删除成功，重新渲染页面
            render()
        })
    }
})

// 编辑图书
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)

document.querySelector('.list').addEventListener('click', (e) => {
    if (e.target.classList.contains('edit')) {
        // 获取图书id
        const bookId = e.target.parentNode.dataset.id
        axios({
            url: `http://hmajax.itheima.net/api/books/${bookId}`,
        }).then((result) => {
            // 查询成功，回显数据到页面
            const bookObject = result.data.data
            const keys = Object.keys(bookObject)
            keys.forEach(key =>
                document.querySelector(`.edit-form input[name=${key}]`).value = bookObject[key]
            )
        })
        // 显示弹框
        editModal.show()
    }
})

document.querySelector('.edit-btn').addEventListener('click', (e) => {
    // 收集表单数据
    const editForm = document.querySelector('.edit-form')
    const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
    axios({
        url: `http://hmajax.itheima.net/api/books/${id}`,
        method: 'PUT',
        data: {
            bookname,
            author,
            publisher,
            creator
        }
    }).then(() => {
        // 修改成功，重新渲染页面
        render()
    })
    
    // 隐藏编辑弹框
    editModal.hide()
})